<template>
  <Portlet>
    <el-row>
      <el-col :span="24" class="marginBottom8" v-if="flag === 'offering'">
        <table class="order-table">
          <tr>
            <td class="order-table-td">
              <table class="order-table-td-table">
                <tr class="tr-header">
                  <td width="30%" align="left" colspan="2">
                    {{biddingInfo.orderNo}}
                    <!--<span style="margin-left:10px;"><mark-template :id="id" :resultColor="detail.colorFlag ? detail.colorFlag : 'gray'"></mark-template></span>-->
                  </td>
                  <td width="20%" align="left">
                    报价人数：<span class="font-orange font-weight500">{{biddingInfo.count || 0}} 人</span>
                  </td>
                  <td width="25%" align="center">
                    {{biddingInfo.business}} | {{biddingInfo.service}}：<span class="font-orange font-weight500">{{biddingInfo.status | filterDataBaseDictionary}}</span>
                  </td>
                  <td width="25%" align="center">
                    抛出时间：{{biddingInfo.foundtime | unixTimestampFilter('YYYY-MM-DD HH:mm')}}
                  </td>
                </tr>
                <tr class="tr-body no-border">
                  <td>
                    <Upload-image :listItemStyle="listItemStyle" :showPictureNum="true" :readonly="true" :value="pictureArr"></Upload-image>
                  </td>
                  <td>
                    <div>
                      <div class="marginBottom8">
                        商品名称：<truncate :value="goodsName" :maxLength="10"></truncate>
                      </div>
                      <div class="marginBottom8">
                        商品数量：{{chOrder.productNum}}件/{{chOrder.totalPackage}}包
                      </div>
                    </div>
                    <div class="clearfix"></div>
                  </td>
                  <td>
                    <div class="marginBottom8">
                      客户姓名：{{biddingInfo.consigneName}} {{biddingInfo.consignePhone}}
                    </div>
                    <div class="marginBottom8">
                      客户地址：<truncate :value="biddingInfo.consigneProvince + biddingInfo.consigneCity + biddingInfo.consigneDistrict + biddingInfo.consigneAddress" :maxLength="24"></truncate>
                    </div>
                  </td>
                  <td align="center">
                    <div>
                      <div class="marginBottom8">
                        参考报价
                      </div>
                      <div class="marginBottom8" v-if="biddingInfo.referenceminmoney && biddingInfo.referencemaxmoney">
                        <span class="font-red font-weight500" style="font-size: 24px;">￥: {{biddingInfo.referenceminmoney | decimalNumFilter}} ~ {{biddingInfo.referencemaxmoney | decimalNumFilter}}</span>
                      </div>
                      <div class="marginBottom8" v-else>
                        无
                      </div>
                    </div>
                  </td>
                  <td align="center">
                    <div>
                      <el-button type="text" @click="cancelOffer()">取消外派</el-button>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </el-col>
      <el-col :span="24" class="marginBottom8">
        <table class="order-table">
          <tr v-for="(item, index) in biddingData" :key="index">
            <td align="center" style="padding-left: 5px; width: 15%">
              <img :src="'/api/ms-mongodb/file/download?fileId=' + item.businessImg" style="width: 150px; height: 150px; border-radius: 50%"/>
            </td>
            <td width="35%">
              <div class="marginBottom8">
                {{item.name}}
                <el-tooltip v-if="item.isAuthention == 1" class="item" effect="dark" content="已通过实名认证" placement="top-start">
                  <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/certification.png" alt="实名认证" title="已通过实名认证" />
                </el-tooltip>
                <el-tooltip v-if="item.isAuthention !== 1" class="item" effect="dark" content="未实名认证" placement="top-start">
                  <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/Unproven.png" alt="未实名认证" title="未实名认证"/>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="carContent(item.cars, item.carsHold)" placement="top-start" style="margin-top: 5px">
                  <img style="no-repeat: center; height: 14px; width: 20px" src="/static/images/faHuoBao/car.png" alt="车辆" :title="carContent(item.cars, item.carsHold)" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="areaContent(item.area)" placement="top-start">
                  <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/warehouse.png" alt="仓库" :title="areaContent(item.area)" />
                </el-tooltip>
              </div>
              <div class="marginBottom8">
                <span class="shiFuAddress">{{item.nature}}</span><span v-if="item.address"> | {{item.address}} </span>
              </div>
              <div class="marginBottom8">
                <el-tooltip v-if="item.favorTMJD == 1" class="item" effect="dark" content="支持汪师傅核销" placement="right">
                  <img style="no-repeat: center; height: 22px; width: 46px" src="/static/images/faHuoBao/wangshifu.png" alt="汪师傅" title="支持汪师傅核销" />
                </el-tooltip>
                <el-tooltip v-if="item.favorTMJD == 1" class="item" effect="dark" content="支持喵师傅核销" placement="right">
                  <img style="no-repeat: center; height: 22px; width: 46px" src="/static/images/faHuoBao/miaoshifu.png" alt="喵师傅" title="支持喵师傅核销" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="服务承诺" placement="right">
                  <img style="no-repeat: center; height: 22px; width: 61px" src="/static/images/faHuoBao/ServiceCommitment.png" alt="服务承诺" title="服务承诺"  @click="pledge(item)"/>
                </el-tooltip>
              </div>
              <div class="marginBottom8">
                <span>好评率：{{item.fhbWorkerCount.applauseRate}}%</span><span style="margin-left: 20px;">总单数：{{item.fhbWorkerCount.finishNum}}</span><span style="margin-left: 20px;">投诉数：{{item.fhbWorkerCount.complainNum}}</span>
              </div>
              <div>
                <span>报价时间：{{item.biddingDate|unixTimestampFilter}}</span>
              </div>
            </td>
            <td align="center" width="25%">
              <div class="cell-center">
                <p>师傅报价</p>
                <p><span style="font-size: 36px;" class="font-red">￥{{item.money}}</span></p>
                报价留言：<truncate :value="item.memo" :maxLength="112"></truncate>
              </div>
            </td>
            <td align="center" width="25%">
              <div class="cell-center">
                <div v-if="flag === 'offering' || flag === 'pending'">
                  <el-button type="primary" v-if="item.isBidding == 1" :disabled="true" :loading="loading" @click="payment(item)"> 支付 </el-button>
                  <el-button v-else type="primary" :loading="loading" @click="payment(item)"> 选择并支付 </el-button>
                </div>
                <div v-else>
                  <!--<span>{{item.isBidding === 1 ? '已选' : '未选'}}</span>-->
                  <img v-if="item.isBidding == 1" style="no-repeat: center; height: 80px; width: 80px" src="/static/images/faHuoBao/bidding.png" alt="中标" title="中标" />
                </div>
              </div>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </Portlet>
</template>
<script>
import {handleJsonStringArr, confirm, dotData, arrayColumn} from '@/utils'
import markTemplate from '@/components/markTemplate'
export default {
  components: {
    markTemplate
  },
  props: {
    id: {
      type: String,
      required: true
    },
    orderId: {
      type: String,
      required: true
    },
    detail: {
      type: Object,
      default() {
        return {}
      }
    },
    flag: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listItemStyle: {
        width: '120px',
        height: '90px'
      },
      loading: false,
      biddingData: [],
      biddingInfo: {}
    }
  },
  created() {
    if (this.orderId) {
      this.$nextTick(_ => {
        this.getBiddingData()
        this.getBiddingInfo()
      })
    }
  },
  computed: {
    chOrder() {
      return dotData(this.detail, 'chOrder') || {}
    },
    chOrderConsigneeInfo() {
      return dotData(this.detail, 'chOrderConsigneeInfo') || {}
    },
    productExtBeans() {
      return dotData(this.detail, 'productExtBeans') || {}
    },
    goodsName() {
      let goodsName = ''
      if (Array.isArray(this.productExtBeans)) {
        this.productExtBeans.forEach(v => {
          goodsName += v.productName + ' '
        })
      }
      return goodsName
    },
    pictureArr() {
      let pictureArr = []
      if (Array.isArray(this.productExtBeans)) {
        pictureArr = arrayColumn(this.productExtBeans, 'pictureId')
      }
      return pictureArr
    }
  },
  methods: {
    handleJsonStringArr,
    carContent() {
      if (this.biddingData.carsHold) {
        return '配送车辆：' + this.biddingData.cars + '辆'
      } else {
        return '配送车辆：0辆'
      }
    },
    areaContent() {
      return '仓库：' + this.biddingData.areaNum + '㎡'
    },
    // 竞价中信息
    getBiddingInfo() {
      this.$ajax.get('/ms-terminal-order/bidding/bidding-order-info', {orderId: this.orderId}).then(response => {
        this.biddingInfo = response.data
      })
    },
    // 报价师傅
    getBiddingData() {
      this.$ajax.get('/ms-terminal-order/bidding/bidding-order-log-list', {orderId: this.orderId}).then(response => {
        if (Array.isArray(response.data)) {
          this.biddingData = response.data
        }
      })
    },
    payment(data) {
      this.loading = true
      this.$ajax.post('/ms-terminal-order/bidding/choice-worker', {id: data.id}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.loading = false
          this.$router.push({path: '/ss-oms/orders/expatriate/offering/payment/' + this.id, query: {orderId: this.orderId}})
        }
      }).finally(_ => {
        this.loading = false
      })
    },
    pledge(data) {
      let BighomeServiceCommitment = dotData(data, 'fhbWorkerServiceCommitment') || {}
      let carrSubject = dotData(BighomeServiceCommitment, 'carrSubject') || ''
      let freeForCarry = dotData(BighomeServiceCommitment, 'freeForCarry') || ''
      let overmileSubject = dotData(BighomeServiceCommitment, 'overmileSubject') || ''
      let coastForOvermile = dotData(BighomeServiceCommitment, 'coastForOvermile') || ''
      let storageSubject = dotData(BighomeServiceCommitment, 'storageSubject') || ''
      let freeForStorage = dotData(BighomeServiceCommitment, 'freeForStorage') || ''
      let uniformSubject = dotData(BighomeServiceCommitment, 'uniformSubject') || ''
      let serviceOnUniform = dotData(BighomeServiceCommitment, 'serviceOnUniform') || ''
      let basicSubject = dotData(BighomeServiceCommitment, 'basicSubject') || ''
      let basicCommitment = dotData(BighomeServiceCommitment, 'basicCommitment') || ''
      let pledgeStr = `<p>1.` + carrSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + freeForCarry + `</p>
                       <p>2.` + overmileSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + coastForOvermile + `</p>
                       <p>3.` + storageSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + freeForStorage + `</p>
                       <p>4.` + uniformSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + serviceOnUniform + `</p>
                       <p>5.` + basicSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + basicCommitment + `</p>`
      this.$alert(pledgeStr, '师傅服务承诺', {
        showConfirmButton: '关闭',
        dangerouslyUseHTMLString: true
      })
    },
    cancelOffer() {
      let postData = {
        id: this.id
      }
      confirm('你确定要取消该订单吗？', '温馨提示', {
        confirmButtonLoading: true,
        type: 'warning',
        center: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmCallBack: ({confirmButtonLoadingClose, close}) => {
          return this.$ajax.post('/ms-terminal-order/bidding/order-cancel', postData).then(response => {
            if (response.success) {
              close().then(_ => {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                this.$router.push({path: '/redirect/ss-oms/orders/expatriate/offering/index'})
              })
            } else {
              confirmButtonLoadingClose()
            }
          }).finally(_ => {
            confirmButtonLoadingClose()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .workerImg {
    no-repeat: center;
    border:1px solid grey;
    height: 102px;
    width: 102px;
    border-radius: 50% !important;
  }
</style>
